<template>
  <div>
    <el-table
      size="small"
      :data="tableData"
      stripe
      border
      @sort-change="sortHandler"
    >
      <el-table-column
        type="index"
        align="center"
        width="50"
      ></el-table-column>
      <el-table-column
        label="描述"
        align="left"
        prop="description"
      >
      </el-table-column>
      <el-table-column
        label="是否启动"
        align="left"
        prop="active"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.active==true"
            style="color: rgba(103, 194, 58, 1);"
          >启用</span>
          <span
            v-else
            style="color: red"
          >不启用</span>
        </template>
      </el-table-column>
      <el-table-column
        label="设备列表"
        align="left"
        prop="deviceList"
      >
        <template slot-scope="scope">
          <el-tag
            v-for="device in scope.row.deviceList"
            :key="device.uuid"
            effect="plain"
          >{{ device.name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        v-if="userGuardList.includes(guard.UpgradeManage)"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="showEdit(scope.row.uuid)"
            size="small"
          >编辑</el-button>
          <el-button
            type="text"
            icon="el-icon-delete"
            @click="remove(scope.row)"
            size="small"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <edit
      ref="editComponent"
      @refresh="search"
    ></edit>
  </div>
</template>

<script>
import Edit from './edit';
import { Message, MessageBox } from 'element-ui';
import { parseError } from '../../../utils';
import { SortType } from '../../../constants/common';
import { deleteUpgradeStrategyApi } from '../../../api/upgradeStrategy';

export default {
  components: {
    Edit
  },
  model: {
    prop: 'sort'
  },
  props: {
    sort: {
      type: Object,
      default() {
        return {};
      }
    },
    tableData: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  methods: {
    search() {
      this.$emit('search');
    },
    sortHandler(data) {
      if (!data.prop || !data.order) return;
      this.sort.sortType = data.order == 'ascending' ? sortType.ASC : SortType.DESC;
      this.$emit('search');
    },
    remove(row) {
      MessageBox.confirm(`确认删除${row.description}吗？`, '删除提示', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        deleteUpgradeStrategyApi(row.uuid)
          .then(() => Message.success('删除更新策略成功'))
          .catch(error => Message.error(parseError(error)))
          .finally(() => this.$emit('search'));
      });
    },
    showEdit(uuid) {
      this.$refs.editComponent.showDialog(uuid);
    }
  }
};
</script>
